import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sleep_manager/ui/widget/custom_app_bar.dart';

/// 我的设备
class MyDevicesPage extends StatefulWidget {

  const MyDevicesPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MyDevicesPageState();
  }

}

class _MyDevicesPageState extends State<MyDevicesPage> {

  /// ListView 列表
  Widget _buildDevicesList() {
    return ListView.builder(
        itemCount: 3,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(), // 禁止内部滑动
        itemBuilder: (BuildContext context, int index) {
          return _buildDevicesItem();
        }
    );
  }

  /// ListView的item
  Widget _buildDevicesItem() {
    return Container(
      margin: const EdgeInsets.fromLTRB(16, 10, 16, 0),
      padding: const EdgeInsets.fromLTRB(27, 27, 16, 34),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: const [
          BoxShadow(
            color: Colors.grey,
            offset: Offset(2, 2),
            blurRadius: 4
          )
        ]
      ),
      child: Row(
        children: [
          SvgPicture.asset('assets/images/my_devices.svg', width: 30, height: 30),
          const SizedBox(width: 18),
          Expanded(
              child:Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      const Text(
                        '睡眠采集盒',
                        style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.bold
                        ),
                      ),
                      Expanded(child: Container()),
                      GestureDetector(
                        onTap: () => {},
                        child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                          decoration: BoxDecoration(
                            color: const Color(0xFFfedcdc),
                            borderRadius: BorderRadius.circular(12)
                          ),
                          child: const Text(
                            '默认',
                            style: TextStyle(
                                color: Color(0xFFFA5151),
                                fontSize: 8
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(width: 15),
                      GestureDetector(
                        onTap: () => {},
                        child: SvgPicture.asset('assets/images/delete.svg', width: 12, height: 12),
                      )
                    ],
                  ),
                  const SizedBox(height: 10),
                  const Text(
                    '设备编号：HSCR_21a6.d785.967c.a5d3',
                    style: TextStyle(
                        fontSize: 10,
                        fontWeight: FontWeight.bold
                    ),
                  ),
                  const SizedBox(height: 7),
                  const Text(
                    '设备状态：已连接',
                    style: TextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.bold
                    ),
                  )
                ],
              )
          )
        ],
      ),
    );
  }

  /// 底部的搜索设备按钮
  Widget _buildSearchDevicesButton() {
    return GestureDetector(
      onTap: () => {},
      child: Container(
        alignment: Alignment.center,
        margin: const EdgeInsets.fromLTRB(16, 40, 16, 30),
        padding: const EdgeInsets.symmetric(vertical: 12),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(24),
            gradient: const LinearGradient(
                colors: [Color(0xFF80BFFF), Color(0xFF397AFB)]
            )
        ),
        child: const Text(
          '搜索设备',
          style: TextStyle(
              fontSize: 18,
              color: Colors.white
          ),
        ),
      )
    );
  }

  /// 扫描到的设备列表
  Widget _buildSearchDevicesList() {
    return ListView.builder(
      itemCount: 10,
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(), // 禁止内部滑动
      itemBuilder: (BuildContext context, int index) {
        return _searchDeviceListItem();
      },
    );
  }

  /// 底部ListView的item
  Widget _searchDeviceListItem() {
    return Container(
      margin: const EdgeInsets.fromLTRB(16, 15, 16, 0),
      padding: const EdgeInsets.fromLTRB(27, 27, 16, 27),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: const [
          BoxShadow(
            color: Colors.grey,
            offset: Offset(2, 2),
            blurRadius: 4.0
          )
        ]
      ),
      child: Row(
        children: [
          SvgPicture.asset('assets/images/my_devices.svg'),
          const SizedBox(width: 18),
          const Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'vivo TWS 4',
                  style: TextStyle(
                    fontWeight: FontWeight.bold
                  ),
                ),
                SizedBox(height: 10),
                Text(
                  '设备编号：94:24:B8:CD:35:BB',
                  style: TextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.bold
                  ),
                )
              ],
            ),
          ),
          GestureDetector(
            onTap: () => {},
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(24),
                  gradient: const LinearGradient(
                      colors: [Color(0xFF80BFFF), Color(0xFF397AFB)]
                  )
              ),
              child: const Text(
                '添加',
                style: TextStyle(
                    fontSize: 12,
                    color: Colors.white
                ),
              ),
            )
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(
        title: '我的设备',
        showBackButton: true,
      ),
      body: Container(
        color: const Color(0xFFF7F7F7),
        child: SingleChildScrollView(
          child: Column(
            children: [
              _buildDevicesList(),
              _buildSearchDevicesButton(),
              _buildSearchDevicesList(),
              const SizedBox(height: 100)
            ],
          ),
        )
      ),
    );
  }

}